import React from "react";
import Admin from "../../../layout/Admin";
import PlayerModel from "../../../model/player";
import {Button, Form, Input, Modal, Popconfirm, Table} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import {formLayout, formTailLayout} from "../../operation/vote/vote";
import Info from "../../../service/info";

const log = console.log.bind(console)

class Player extends React.Component {
    constructor(props) {
        super(props)
        this.model = new PlayerModel()
        this.names = ['Name', 'Place', 'Countryteamname', 'Clubteamname', 'Number']
        this.labels = ['球员名', '位置', '国家队名', '俱乐部', '背号',]
        const columns = this.names.map((name, index) => ({
            dataIndex: name,
            title: this.labels[index],
        }))
        this.columns = [
            ...columns,
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>
                        <a onClick={() => this.onEdit(record)}>编辑</a>
                        <Popconfirm title='确定删除？' onConfirm={() => this.delete(record)}>
                            <a>删除</a>
                        </Popconfirm>

                    </div>
                }
            }
        ]
        this.state = {
            club: '',
            p: 0,
            list: [],
            txt: 0,
            flag: 0,
            modal: {
                add: false,
            },
            player: null,
        }
    }

    componentDidMount() {
        this.all()
    }

    all = () => {

        const params = {
            P: this.state.p,
            Flag: this.state.flag,
        }

        if (this.state.club.length > 0 && this.state.flag === 4) {
            params.Txt = this.state.club
        }

        this.model
            .all(params)
            .then(res => {
                const list = res.data.ok
                if (list) {
                    this.setState({
                        list,
                    })
                }
            })
    }

    delete = (record) => {
        this.model
            .delete({Id: record.Id,})
            .then(res => {
                if (res.data.ok) {
                    Info.success('删除成功')
                    this.all()
                }
            })
    }

    onEdit = (player) => {
        this.callModal('add')
        this.setState({
            player: player,
        }, () => {
            setTimeout(() => {
                this.addForm.setFieldsValue(player)
            })
        })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    onAdd = (value) => {
        log(value)
        const params = {...value,}
        if (this.state.player) {
            params.Id = this.state.player.Id
        }
        // params.Number = parseInt(value.Number)
        const action = this.state.player ? 'set' : 'add'
        this.model
            [action](params)
            .then(res => {
                const data = res.data.ok
                if (data) {
                    Info.success('成功',)
                    this.cancelModal('add')
                    this.all()
                }
            })
    }

    onSearch = (value) => {
        log(value)
        this.setState({
            flag: 4,
            club: value,
            p: 0,
        }, () => this.all())
    }

    onAddFormCancel = () => {
        this.cancelModal('add')
        this.setState({
            player: null,
        })
        this.addForm.resetFields()
    }

    render() {
        return <>
            <Modal
                visible={this.state.modal.add}
                onCancel={() => this.onAddFormCancel()}
                footer={null}
                title='添加球员'
                width='50%'
            >
                <Form
                    {...formLayout}
                    name='add'
                    ref={el => this.addForm = el}
                    onFinish={this.onAdd}
                >
                    {this.names.map((name, index) => {
                        const labels = this.labels
                        const label = labels[index]
                        return <Form.Item
                            key={name}
                            label={labels[index]}
                            name={name}
                            rules={[
                                {
                                    required: true,
                                    message: `请输入${label}`
                                }
                            ]}
                        >
                            <Input placeholder={`请输入${label}`}/>
                        </Form.Item>
                    })}
                    <Form.Item {...formTailLayout}>

                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>

                    </Form.Item>
                </Form>

            </Modal>
            <Admin>
                <div className='list-container'>
                    <div style={{marginBottom: 8,}}>
                        <Button onClick={() => this.callModal('add')}>
                            添加球员
                        </Button>
                    </div>
                    <div style={{marginBottom: 8, width: 300,}}>
                        <Input.Search
                            placeholder="按俱乐部搜索"
                            enterButton="搜索"
                            // size="large"
                            onSearch={this.onSearch}
                        />
                    </div>
                    <Table
                        dataSource={this.state.list}
                        columns={this.columns}
                        pagination={false}
                        rowKey={(record, index) => index}
                    />
                    <PaginationFooter
                        pageIndex={this.state.p}
                        prevPage={this.prevPage}
                        nextPage={this.nextPage}
                    />
                </div>
            </Admin>
        </>
    }
}

export default Player